<script setup lang="ts">
import { toRefs, ref } from "vue";
// import { useI18n } from "vue-i18n";

// const { t } = useI18n();
// const $t = key => {
//   return t("home.win_list." + key);
// };
const emit = defineEmits(["flag", "open", "openAll"]);
const props = defineProps({
  count: Number,
  isBomb: Boolean,
  index: Number
});
const { count, isBomb, index } = toRefs(props);
const isOpen = ref(false);
const isFlag = ref(false);

const handleBom = () => {
  open();
};
const open = () => {
  if (isOpen.value || isFlag.value) {
    return;
  }
  isOpen.value = true;
  emit("open");
};
const handleRightClick = event => {
  event.preventDefault();
  if (isOpen.value) {
    return;
  }
  isFlag.value = !isFlag.value;
  emit("flag", isFlag.value);
};

const reset = () => {
  isOpen.value = false;
  isFlag.value = false;
};
defineExpose({
  reset,
  open,
  isFlag,
  isBomb
});
</script>
<template>
  <div
    class="grid-item"
    :class="{ opened: isOpen }"
    @click="handleBom"
    @contextmenu="handleRightClick"
  >
    <template v-if="isFlag">ok</template>
    <template v-else-if="isOpen">
      <!-- 雷 -->
      <template v-if="isBomb&& index != 12">
        <span class="w70 rotate90 lei">
          <img class="w50" src="../../../assets/sweep/bom.png">
        </span>
      </template>
      <!-- 金币 -->
      <template v-else>
        <div class="w70 jb" v-if="index != 12">
          <img class="w50" src="../../../assets/sweep/jb.png">
        </div>
      </template>
    </template>
    <!-- 宝箱 -->
    <!-- <template v-if="index == 12"> 
      <div class="wh70 cols">
        <img class="w60" src="../../../assets/sweep/bx.png">
      </div>
    </template> -->
  </div>
</template>
<style lang="less" scoped>
.w70 {
  width: 100%;
  height: 100%; 
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.cols{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.w50{
  width: 50px;
  height: 50px;
  
}
.jb{
  background-color: rgb(174 , 131, 31);
}
.lei{
  background-color: rgb(57 , 34, 92);
}
 
 .rotate90{
  transform: rotate(270deg);
 } 
.wh70 {
  width: 70px;
  height: 70px;
}
.grid-item {
  background-color: rgb(118 , 24, 26);
}
</style>
